<!-- 登录页面 -->
<template>
	<view class="login-bg">
		<image class="bg-image" >
			<view class="t-login-container">
				<view class="t-login">
					<form class="cl">
						<view class="title">手机号快速登录</view>
						<view class="t-a">
							<view class="label">手机号</view>
							<input type="number" name="phone" placeholder="请输入您要绑定的手机号" maxlength="11" v-model="phone" />
						</view>
						<view class="underline"></view>
						<button class="b-a" @tap="getLogin" plain="true" >快速登录</button>
						<button class="b-b" @tap="noLogin" plain="true">稍后授权</button>
						<button class="b-c" plain="true">一键获取</button>
					</form>
				</view>
			</view>
		</image>
	</view>
</template>
<script>
import request from "../../api/request";
import {mapMutations} from 'vuex'
export default {
	
	data() {
		return {
			phone: '', //手机号码
			token:'',
		};
	},
	onLoad() {},
	methods: {
		...mapMutations(['login']),
		//当前登录按钮操作
		getLogin() {
			if (!this.phone) {
				uni.showToast({ title: '请输入手机号', icon: 'none' });
				return;
			}
			if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.phone)) {
				uni.showToast({ title: '请输入正确手机号', icon: 'none' });
				return;
			}
			uni.showLoading({
				title:"登录中...",
				mask: true
			})
			request({
				url: '/kx/login/mobile',
				data:{
					mobile:this.phone,
				},
				 successCb: (res) => {
			     uni.setStorageSync('token', res.data.token);
				 // uni.setStorageSync('number_times', 'a');
				 this.getUserInfo(res.data.token);
				 uni.showToast({
				    title: "登录成功",
				     icon: "none"
				 })
			     setTimeout(() => {
					uni.hideLoading();
					uni.redirectTo({
					  url: '../index/index'
					});
				 },1000)
			},
			errorCb: () => {
			  uni.showToast({
				title: '请求失败',
				icon: 'none'
			  })
			}
		  });
		},
		getUserInfo(token){
			request({
				url: '/kx/index/getUserInfo',
				 data: { token: token },
				successCb: (res) => {
					this.userInfo =res.data.data;
					// 保存用户信息
					uni.setStorageSync('userInfo',JSON.stringify(this.userInfo))
					// this.login(res.data.data);
				},
			});
		},
		noLogin(){
			uni.redirectTo({
			  url: '../index/index'
			});
		}
		
	}
};
</script>
<style>
.login-bg {
  position: relative;
  height: 100vh;
  z-index: 1;
}

.bg-image {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url(https://kx.taipingkeji.com/upload/1/common/images/20231218/20231218101051170290865124067.png);
  top: 0;
  left: 0;
  z-index: -1; /* 将背景图的z-index设为-1，使其在t-login下方 */
}
.img-a {
	width: 100%;
	position: absolute;
	bottom: 0;
}

.login-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 灰色遮罩层背景色 */
  z-index: 2; /* 将遮罩层置于背景图下方 */
}
.t-login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.t-login {
	position: relative; /* 添加相对定位 */
	width: 600rpx;
	height:630rpx;
	/* padding: 60rpx; */
	margin: 0 auto;
	font-size: 28rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.15);
	z-index: 10;
}
.t-login .title {
  padding-top: 50rpx;
  text-align: center;
  font-size: 38rpx;
  font-weight: bold;
  padding-bottom: 10px;
}
.t-login button {
	font-size: 28rpx;
	width: 535rpx; 
	height: 80rpx; 
	line-height: 90rpx;
	border-radius: 50rpx;
}
.t-login button[plain] {
	border: 0
}
.t-login input {
	padding: 0rpx 30rpx 0rpx 120rpx;
	height: 90rpx;
	line-height: 90rpx;
	margin-left: 20rpx;
	margin-bottom: 40rpx;
	/* background: #f6f6f6; */
	/* border: 1px solid #f6f6f6; */
	font-size: 28rpx;
	border-radius: 50rpx;
}
.t-login .t-a {
	position: relative;
	display: flex;
	align-items: center;
}
.t-login .t-a .label {
	height: 90rpx;
	position: absolute;
	left: 30rpx;
	top: 28rpx;
	margin-right: 20rpx;
}
.t-login .underline {
  width: calc(100% - 60rpx); /* 将宽度设置为 100% 减去左右缩进的值 */
  height: 1rpx;
  background-color: #9f9f9f;
  position: relative;
  bottom: 20px;
  margin: 0 30rpx; /* 添加左右缩进 */
}
.t-login .uni-input-placeholder {
	color: #9f9f9f;
}
.t-login .b-a {
  background: linear-gradient(90deg, #FF8732 0%, #FFB65E 100%);;
  color: #fff;
}
.t-login .b-b {
  background-color: #f6f6f6;
  margin-top: 20px;
  color: #00000;
}
.t-login .b-c {
  background-color: #fff;
  margin-top: 20px;
  color: #00000;
}

</style>
